import React from 'react';
import { Line, Area, Column, Bar, Pie, WordCloud, Box } from '@antv/g2plot';
import './index.less'

class Home extends React.Component {
    componentDidMount() {
        this.initLineChart()
        this.initAreaChart()
        this.initColumnChart()
        this.initBarChart()
        // this.initPieChart()
        this.initWordCloudChart()
        this.initBoxChart()
    }
    initBoxChart = () => {
        const data = [
            { x: '职业 A', low: 20000, q1: 26000, median: 27000, q3: 32000, high: 38000, outliers: [50000, 52000] },
            { x: '职业 B', low: 40000, q1: 49000, median: 62000, q3: 73000, high: 88000, outliers: [32000, 29000, 106000] },
            { x: '职业 C', low: 52000, q1: 59000, median: 65000, q3: 74000, high: 83000, outliers: [91000] },
            { x: '职业 D', low: 58000, q1: 96000, median: 130000, q3: 170000, high: 200000, outliers: [42000, 210000, 215000] },
            { x: '职业 E', low: 24000, q1: 28000, median: 32000, q3: 38000, high: 42000, outliers: [48000] },
            { x: '职业 F', low: 47000, q1: 56000, median: 69000, q3: 85000, high: 100000, outliers: [110000, 115000, 32000] },
            { x: '职业 G', low: 64000, q1: 74000, median: 83000, q3: 93000, high: 100000, outliers: [110000] },
            { x: '职业 H', low: 67000, q1: 72000, median: 84000, q3: 95000, high: 110000, outliers: [57000, 54000] },
        ];

        const outliersBoxPlot = new Box('box', {
            data,
            xField: 'x',
            yField: ['low', 'q1', 'median', 'q3', 'high'],
            outliersField: 'outliers',
            outliersStyle: {
                fill: '#f6f',
            },
        });

        outliersBoxPlot.render();
    }
    initWordCloudChart = () => {
        fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/antv-keywords.json')
            .then((res) => res.json())
            .then((data) => {
                const wordCloud = new WordCloud('wordCloud', {
                    data,
                    width: 600,
                    height: 400,
                    wordField: 'name',
                    weightField: 'value',
                    colorField: 'value',
                    imageMask: 'https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*07tdTIOmvlYAAAAAAAAAAABkARQnAQ',
                    wordStyle: {
                        fontFamily: 'Verdana',
                        fontSize: [8, 32],
                    },
                });

                wordCloud.render();
            });
    }
    initPieChart = () => {
        const data = [
            { type: '分类一', value: 27 },
            { type: '分类二', value: 25 },
            { type: '分类三', value: 18 },
            { type: '分类四', value: 15 },
            { type: '分类五', value: 10 },
            { type: '其他', value: 5 },
        ];

        const piePlot = new Pie('pie', {
            appendPadding: 10,
            data,
            angleField: 'value',
            colorField: 'type',
            radius: 0.8,
            innerRadius: 0.6,
            label: {
                type: 'inner',
                // @ts-ignore 偏移 50% TODO 后续支持直接配置 -50%
                offset: '-0.5',
                //   content: '{percentage}',
                style: {
                    fill: '#fff',
                    fontSize: 14,
                    textAlign: 'center',
                },
            },
            interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
            statistic: {
                title: false,
                content: {
                    style: {
                        fontSize: 44,
                    },
                    formatter: () => 'AntV\nG2Plot',
                },
            },
        });

        piePlot.render();
    }
    initBarChart = () => {
        const data = [
            {
                type: '家具家电',
                sales: 38,
            },
            {
                type: '粮油副食',
                sales: 52,
            },
            {
                type: '生鲜水果',
                sales: 61,
            },
            {
                type: '美容洗护',
                sales: 145,
            },
            {
                type: '母婴用品',
                sales: 48,
            },
            {
                type: '进口食品',
                sales: 38,
            },
            {
                type: '食品饮料',
                sales: 38,
            },
            {
                type: '家庭清洁',
                sales: 38,
            },
        ];

        const barPlot = new Bar('bar', {
            data,
            xField: 'sales',
            yField: 'type',
            meta: {
                type: {
                    alias: '类别',
                },
                sales: {
                    alias: '销售额',
                },
            },
        });

        barPlot.render();
    }
    initColumnChart = () => {
        const data = [
            {
                name: 'London',
                月份: 'Jan.',
                月均降雨量: 18.9,
            },
            {
                name: 'London',
                月份: 'Feb.',
                月均降雨量: 28.8,
            },
            {
                name: 'London',
                月份: 'Mar.',
                月均降雨量: 39.3,
            },
            {
                name: 'London',
                月份: 'Apr.',
                月均降雨量: 81.4,
            },
            {
                name: 'London',
                月份: 'May',
                月均降雨量: 47,
            },
            {
                name: 'London',
                月份: 'Jun.',
                月均降雨量: 20.3,
            },
            {
                name: 'London',
                月份: 'Jul.',
                月均降雨量: 24,
            },
            {
                name: 'London',
                月份: 'Aug.',
                月均降雨量: 35.6,
            },
            {
                name: 'Berlin',
                月份: 'Jan.',
                月均降雨量: 12.4,
            },
            {
                name: 'Berlin',
                月份: 'Feb.',
                月均降雨量: 23.2,
            },
            {
                name: 'Berlin',
                月份: 'Mar.',
                月均降雨量: 34.5,
            },
            {
                name: 'Berlin',
                月份: 'Apr.',
                月均降雨量: 99.7,
            },
            {
                name: 'Berlin',
                月份: 'May',
                月均降雨量: 52.6,
            },
            {
                name: 'Berlin',
                月份: 'Jun.',
                月均降雨量: 35.5,
            },
            {
                name: 'Berlin',
                月份: 'Jul.',
                月均降雨量: 37.4,
            },
            {
                name: 'Berlin',
                月份: 'Aug.',
                月均降雨量: 42.4,
            },
        ];

        const stackedColumnPlot = new Column('column', {
            data,
            isGroup: true,
            xField: '月份',
            yField: '月均降雨量',
            seriesField: 'name',
            color: ['#1ca9e6', '#f88c24'],
            label: {
                // 可手动配置 label 数据标签位置
                position: 'middle', // 'top', 'middle', 'bottom'
                // 可配置附加的布局方法
                layout: [
                    // 柱形图数据标签位置自动调整
                    { type: 'interval-adjust-position' },
                    // 数据标签文颜色自动调整
                    { type: 'adjust-color' },
                ],
            },
        });

        stackedColumnPlot.render();
    }
    initAreaChart = () => {
        fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
            .then((res) => res.json())
            .then((data) => {
                const area = new Area('area', {
                    data,
                    xField: 'Date',
                    yField: 'scales',
                    xAxis: {
                        tickCount: 5,
                    },
                });
                area.render();
            });
    }
    initLineChart = () => {
        const data = [
            { year: '1991', value: 3 },
            { year: '1992', value: 4 },
            { year: '1993', value: 3.5 },
            { year: '1994', value: 5 },
            { year: '1995', value: 4.9 },
            { year: '1996', value: 6 },
            { year: '1997', value: 7 },
            { year: '1998', value: 9 },
            { year: '1999', value: 13 },
        ];

        const line = new Line('line', {
            data,
            xField: 'year',
            yField: 'value',
            smooth: true,
            meta: {
                value: {
                    max: 15,
                },
            },
        });

        line.render();
    }
    render() {
        return (
            <div className="home">
                <div className="chart" id="line"></div>
                <div className="chart" id="area"></div>
                <div className="chart" id="column"></div>
                <div className="chart" id="bar"></div>
                {/* <div className="chart" id="pie"></div> */}
                <div className="chart" id="wordCloud"></div>
                <div className="chart" id="box"></div>
            </div>
        );
    }
}
export default Home
